<template>
  <div class="app-container-detail">
    <!-- 功能按钮 -->
    <el-row :gutter="10" class="button-wrap">
      <el-col :span="1.5">
        <el-button icon="el-icon-arrow-left" size="mini" @click="handleReturn()">返回</el-button>
      </el-col>
      <el-col v-if="msgType && ExplorationStatus === '0'" :span="1.5">
        <el-button v-clickForbidden icon="el-icon-document-checked" size="mini" @click="handleComfig(true)">确认</el-button>
      </el-col>
      <el-col v-if="msgType && ExplorationStatus === '0'" :span="1.5">
        <el-button v-clickForbidden icon="el-icon-document-checked" size="mini" @click="handleComfig()">拒绝</el-button>
      </el-col>
    </el-row>
    <!-- form表单 -->
    <div ref="mainCont" class="main-content">
      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span>勘探点详情</span>
        </div>
        <div class="main-content-body">
          <div class="detail-item">
            <table class="detail-table" cellpadding="0" cellspacing="0">
              <tr>
                <td>
                  <span class="labelTitle">勘探点编号</span>
                </td>
                <td>
                  <span class="infoText">{{ formData.explorationCode }}</span>
                </td>
                <td>
                  <span class="labelTitle">钻孔类型</span>
                </td>
                <td>
                  <span v-if="formData.drillHole === '0'" class="infoText">钻探</span>
                  <span v-if="formData.drillHole === '1'" class="infoText">静探</span>
                </td>
                <td>
                  <span class="labelTitle">钻探类型</span>
                </td>
                <td>
                  <span v-if="formData.drillingType" class="infoText">{{ formatDrillingType(formData.drillingType) }}</span>
                  <span v-else class="infoText">-</span>
                </td>
                <td>
                  <span class="labelTitle">钻孔子类</span>
                </td>
                <td>
                  <span v-if="formData.explorationType" class="infoText">{{ formatExplorationType(formData.explorationType) }}</span>
                  <span v-else class="infoText">-</span>
                </td>
              </tr>
              <tr>
                <td>
                  <span class="labelTitle">坐标经度</span>
                </td>
                <td>
                  <span class="infoText">{{ formData.x }}</span>
                </td>
                <td>
                  <span class="labelTitle">坐标纬度</span>
                </td>
                <td>
                  <span class="infoText">{{ formData.y }}</span>
                </td>
                <td>
                  <span class="labelTitle">坐 标 X</span>
                </td>
                <td>
                  <span class="infoText">{{ formData.x1 }}</span>
                </td>
                <td>
                  <span class="labelTitle">坐 标 Y</span>
                </td>
                <td>
                  <span class="infoText">{{ formData.y1 }}</span>
                </td>
              </tr>
              <tr>
                <td>
                  <span class="labelTitle">设计深度</span>
                </td>
                <td>
                  <span class="infoText">{{ formData.depth }}m</span>
                </td>
                <td>
                  <span class="labelTitle">勘探点高程</span>
                </td>
                <td>
                  <span class="infoText">{{ formData.elevation }}m</span>
                </td>
                <td>
                  <span class="labelTitle">开始时间</span>
                </td>
                <td>
                  <span class="infoText">{{ formData.startTime }}</span>
                </td>
                <td>
                  <span class="labelTitle">结束时间</span>
                </td>
                <td>
                  <span class="infoText">{{ formData.endTime }}</span>
                </td>
              </tr>
            </table>
            <div class="two-level-title">勘探外业数据采集</div>
            <el-table class="table-list" stripe :data="tableData" border style="width: 100%">
              <el-table-column fixed="left" label="层序" type="index" width="55" align="center" />
              <el-table-column fixed="left" label="描述深度(m)" width="120" align="center">
                <el-table-column prop="outStartDepth" label="由" width="60" align="center" />
                <el-table-column prop="outEndDepth" label="至" width="60" align="center" />
              </el-table-column>
              <el-table-column label="地层描述" align="center">
                <el-table-column prop="soilName" label="土的名称" width="100" align="center" />
                <el-table-column prop="soilColor" label="颜色" width="80" align="center" />
                <el-table-column :show-overflow-tooltip="true" prop="otherProperties" label="其他性质" min-width="150" align="center" />
                <el-table-column prop="glossReaction" :formatter="formatGlossReaction" label="光泽反应" width="120" align="center" />
                <el-table-column prop="vibrationResponse" :formatter="formatVibrationResponse" label="摇振反应" width="80" align="center" />
                <el-table-column prop="dryStrength" :formatter="formatDryStrength" label="干强度" width="80" align="center" />
                <el-table-column prop="tenacity" :formatter="formatTenacity" label="韧性" width="80" align="center" />
              </el-table-column>
              <el-table-column prop="soilStatus" :formatter="formatSoilStatus" label="状态(粘性土)" width="120" align="center" />
              <el-table-column prop="humidity" :formatter="formatHumidity" label="湿度" width="80" align="center" />
              <el-table-column prop="density" :formatter="(row) => formatDensity(row.density)" label="密度" width="80" align="center" />
              <el-table-column label="原位测试" align="center">
                <el-table-column prop="inSituCode" label="编号" width="80" align="center" />
                <el-table-column label="深度/m" width="60" align="center">
                  <el-table-column prop="inSitStartDepth" label="由" width="60" align="center" />
                  <el-table-column prop="inSitEndDepth" label="至" width="60" align="center" />
                </el-table-column>
                <el-table-column prop="clubLength" label="杆长(m)" width="80" align="center" />
                <el-table-column prop="measuredNum" label="实测击数/10cm" width="120" align="center" />
              </el-table-column>
              <el-table-column label="照片/视频" width="120" align="center">
                <template slot-scope="{row,$index}">
                  <i class="el-icon-picture show-img" @click="showPicture(row.outSideId,$index)" />
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-card>
    </div>
    <previewVideo ref="previewVideo" :img-id-list.sync="imgIdList" />
  </div>
</template>
<script>
/** 页面接口 start*/
// 系统字典一次性请求多条数据
import { getDictTypes } from '@/api/system/dict/data'
import { getSysDicts } from '@/api/common/getSysDicts'
import { listByTreeProcessType } from '@/api/common/area.js'
import { getGoephyDetail, getOutSidePhone } from '@/api/projectManage/projectData/dataAcquisition'
import previewVideo from '@/components/basicinfo/previewVideo'
import {
  explorationDistributionPerson,
  explorationDistributionEquipment
} from '@/api/common/approvalReminder'
import { mapState } from 'vuex'
// 页面接口
import { getExplorationById, selectExplorationStatusByUserId } from '@/api/projectManage/project/exploration'
export default {
  components: {
    previewVideo
  },
  data() {
    return {
      imgIdList: [],
      // 消息提醒
      msgType: '',
      ExplorationStatus: '', // 勘探点是否确认的状态
      tableData: [], // 外业数据列表
      blend: [],
      drillHole: [],
      exploratoryWell: [],
      title: '', // 页面标题
      /* 表单 start*/
      currentProvince: '',
      cityOptions: [],
      formData: {
        explorationCode: '', // 勘探点编号
        drillHole: '0', // 钻孔类型
        drillingType: '', // 钻探类型
        explorationType: '', // 钻孔子类
        depth: '', // 设计深度
        dateTimeRange: [], // 计划时间
        startTime: '',
        endTime: '',
        elevation: '', // 高程
        x: 0, // 坐标经度
        y: 0, // 坐标纬度
        x1: 0, // 2000X
        y1: 0, // 2000X
        currentProvince: '', // 所在区域
        explorationId: '' // 钻孔id
      },
      // 钻探类型
      drillingTypeOptions: []
      /* 表单 end*/
    }
  },
  computed: {
    ...mapState({
      needTagsView: (state) => state.settings.tagsView,
      explorationType: state => state.basicInfo.explorationType // 勘探点类型全部
    })
  },
  mounted() {
    const { exploration, explorationId, msgType } = this.$route.query
    if (explorationId) {
      this.explorationId = explorationId
    } else {
      this.explorationId = exploration[0].explorationId
    }
    this.getSysDrillingTypeList()
    this.msgType = msgType
    this.getDetailById(this.explorationId)
    this.getRegionTree()
    this.getOutside(this.explorationId)
    this.selectExplorationStatusByUserId(this.explorationId)
  },
  methods: {
    async selectExplorationStatusByUserId(explorationId) {
      const { data } = await selectExplorationStatusByUserId({ explorationId })
      this.ExplorationStatus = data
    },
    // 钻探类型
    async getSysDrillingTypeList() {
      const { data: { rows }} = await getSysDicts('sys_drilling_type')
      if (rows) this.drillingTypeOptions = rows
    },
    // 翻译钻探类型
    formatDrillingType(drillingType) {
      if (drillingType) return this.selectDictLabel(this.drillingTypeOptions, drillingType)
    },
    // 翻译钻孔子类
    formatExplorationType(explorationType) {
      if (explorationType) return this.selectDictLabel(this.explorationType, explorationType)
    },
    // 翻译光泽反应
    formatGlossReaction(row) {
      return this.selectDictLabel(this.glossReactionList, row.glossReaction)
    },
    // 翻译摇振反应
    formatVibrationResponse(row) {
      return this.selectDictLabel(this.vibrationResponseList, row.vibrationResponse)
    },
    // 翻译干强度
    formatDryStrength(row) {
      return this.selectDictLabel(this.dryStrengthList, row.dryStrength)
    },
    // 翻译韧性
    formatTenacity(row) {
      return this.selectDictLabel(this.tenacityList, row.tenacity)
    },
    // 状态(粘性土)翻译
    formatSoilStatus(row) {
      return this.selectDictLabel(this.soilStatusList, row.soilStatus)
    },
    // 翻译湿度
    formatHumidity(row) {
      return this.selectDictLabel(this.humidityList, row.humidity)
    },
    // 密度翻译
    formatDensity(density) {
      return this.selectDictLabel(this.densityList, density)
    },
    // 获取湿度、 密度、状态字典
    async getDictData() {
      const { data: { gloss_reaction, vibration_response, dry_strength, tenacity, humidity, density, soil_status }} = await getDictTypes('gloss_reaction,vibration_response,dry_strength,tenacity,humidity,density,soil_status')
      this.glossReactionList = gloss_reaction
      this.vibrationResponseList = vibration_response
      this.dryStrengthList = dry_strength
      this.tenacityList = tenacity
      this.humidityList = humidity
      this.densityList = density
      this.soilStatusList = soil_status
    },
    // 图片展示
    showPicture(outSideId, index) {
      getOutSidePhone({ outSideId }).then(res => {
        this.imgIdList = res.data
        if (res.data[0]) {
          this.$nextTick(() => {
            this.$refs.previewVideo.previewBigImg()
          })
        } else {
          this.msgWarning('暂无照片')
        }
      })
    },
    // 审批
    handleComfig(isAgree) {
      const status = isAgree ? '0' : '1'
      const { proId } = this.$route.query
      const explorationId = this.explorationId
      switch (this.msgType) {
        case '021': // 钻孔分配人员
          this.approvalReminder(isAgree, explorationDistributionPerson, { proId, explorationId, consentFlag: status })
          break

        case '031': // 钻孔分配设备
          this.approvalReminder(isAgree, explorationDistributionEquipment, { proId, explorationId, consentFlag: status })
          break
      }
    },
    // 审批
    approvalReminder(isAgree, methodName, params) {
      if (isAgree) {
        this.$confirm('是否同意审批?', '提示', {
          confirmButtonText: '同意',
          cancelButtonText: '取消'
        }).then(async() => { // 同意审批
          const { code } = await methodName([params])
          if (code === 200) {
            this.msgSuccess('审批成功')
            this.$router.go(-1)
          }
        }).catch(() => {})
      } else { // 审批被拒绝
        this.$confirm('您确定要拒绝吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(async() => {
          const { code } = await methodName([params])
          if (code === 200) {
            this.msgSuccess('拒绝成功')
            this.$router.go(-1)
          }
        }).catch(() => {})
      }
    },
    // 顶部按钮
    // 获取详情
    getDetailById(id) {
      getExplorationById(id).then(res => {
        if (res) {
          this.formData = { ...res.data }
        }
      })
    },
    // 外业数据列表
    getOutside(id) {
      this.getDictData()
      getGoephyDetail({ explorationId: id }).then(res => {
        if (res.data) {
          this.tableData = res.data
        }
      })
    },
    /* 选择项目负责人 end*/
    // 返回
    handleReturn() {
      this.$router.go(-1)
    },
    // 获取区域树
    async getRegionTree() {
      const { data: { rows }} = await listByTreeProcessType({ regionCode: '' })
      this.cityOptions = this.deleteChildren(rows)
      this.getRegionCode()
    },
    // 根据地区编码回显地区
    getRegionCode() {
      const { formData: { province, city, county }} = this
      if (!county) return
      const region = this.cityOptions[0].children.find(item => {
        return item.children && item.children.some(city => city.value === province)
      })
      const sheng = region.children.find(sheng => sheng.value === province)
      const shi = sheng.children.find(shi => shi.value === city)
      const xian = shi.children.find(xian => xian.value === county)
      this.currentProvince = (region.label + sheng.label + shi.label + xian.label) || ''
    }
  }
}
</script>

<style lang="scss" scoped>
.el-col {
  margin-bottom: 0px;
}
.show-img {
  font-size: 20px;
  cursor: pointer;
}
</style>
